<!DOCTYPE html>
<html dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/images/favicon.png">
    <title>图书管理系统</title>
    <link href="./dist/css/style.min.css" rel="stylesheet">
    <script src="./assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="./assets/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="./assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!--    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>-->
<!--    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>-->
</head>

<body>
<div class="main-wrapper">

    <div class="auth-wrapper d-flex no-block justify-content-center align-items-center bg-dark">
        <div class="auth-box bg-dark border-top border-secondary">
            <div>
                <div class="text-center p-t-20 p-b-20">
                    <span class="db"><img src="./assets/images/logo.png" alt="logo" /></span>
                </div>

                <form class="form-horizontal m-t-20" action="index.html">
                    <div class="row p-b-30">
                        <div class="col-12">
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-danger text-white"><i class="ti-email"></i></span>
                                </div>
                                <input type="email" id="email" class="form-control form-control-lg" placeholder="Email Address" aria-label="Username" aria-describedby="basic-addon1" required pattern="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$" title="请输入正确的邮箱格式">
                            </div>
                            <div>
                                <button id="send-email" class="btn btn-block btn-info" type="button">发送验证码</button>
                            </div><br/>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-warning text-white"><i class="ti-pencil"></i></span>
                                </div>
                                <input type="text" id="checkcode" class="form-control form-control-lg" placeholder="Check Code" aria-label="Password" aria-describedby="basic-addon1" required>
                            </div>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text bg-info text-white"><i class="ti-pencil"></i></span>
                                </div>
                                <input type="password" id="password" class="form-control form-control-lg" placeholder="Password" aria-label="Password" aria-describedby="basic-addon1" required>
                            </div>
                        </div>
                    </div>
                    <div class="row border-top border-secondary">
                        <div class="col-12">
                            <div class="form-group">
                                <div class="p-t-20">
                                    <button class="btn btn-info" onclick="window.location.href='index.html'" type="button">返回登录</button>
                                    <button class="btn btn-info float-right" onclick="register()" type="button">注册</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">

    document.getElementById("send-email").onclick = function()
    {
        var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
        if ($("#email").val() == ""){
            alert("邮箱不能为空!")
        }else if (!reg.test($("#email").val())){
            alert("邮箱格式错误!")
        }else {
            checkemail(this);
        }
    }
    var waitTime=0;
    var code = "";
    function checkemail(ele) {
        var email = $("#email").val();
        $.ajax({
            type:"POST",
            url:"/users/register",
            data:{
                email:email
            },
            dataType:"json",
            success:function(result){
                if(!result.status){
                    alert("邮箱已经被注册，请重新输入!");
                }
                else{
                    alert("邮箱可以使用!"+result.checkcode);
                    code = result.checkcode;
                    waitTime=30;
                    time(ele);
                }
            }
        });

    }
    function time(ele) {
        if (waitTime == 0) {
            ele.disabled=false;
            ele.innerHTML ="发送验证码";
            waitTime = 30;
        }
        else {
            ele.disabled=true;
            ele.innerHTML = waitTime + "秒后可以重新发送";
            waitTime--;
            setTimeout(function() {
                time(ele)
            }, 1000)
        }
    }


    function register(){
        var checkcode = $("#checkcode").val();
        if (code != checkcode){
            alert("请输入正确的验证码!");
        } else if ($("#password").val() == ""){
            alert("密码不能为空!")
        } else{
            var email = $("#email").val();
            var password = $("#password").val();
            $.ajax({
                type:"POST",
                url:"/users",
                data:{
                    email:email,
                    password:password
                },
                dataType:"json",
                success:function(result){
                    if (result){
                        alert("注册成功，点击确定即可跳转到登录页!");
                        window.open("index.html","_self");
                    }
                }
            });
        }

    }
</script>
</body>
</html>